@extends('admin.common.main')

@section('cnt')
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i>
        首页 <span class="c-gray en">&gt;</span>
        用户中心<span class="c-gray en">&gt;</span>
        添加用户 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <article class="page-container">
        {{--表单验证提示--}}
        @include('admin.common.validate')

        <form action="{{ route('admin.user.store')  }}" method="post" class="form form-horizontal" id="form-member-add">

            @csrf

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>用户名：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="{{old('username')}}" placeholder="" id="username" name="username" >
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>真实名：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="{{old('truename')}}" placeholder="" id="truename" name="truename" >
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>密码：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="{{old('password')}}" placeholder="" id="password" name="password" >
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>确认密码：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="{{old('password_confirmation')}}"  placeholder="" id="password_confirmation"  name="password_confirmation" >
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>性别：</label>
                <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                    <div class="radio-box">
                        <input name="sex" type="radio" value="先生" id="sex-1" checked>
                        <label for="sex-1">先生</label>
                    </div>
                    <div class="radio-box">
                        <input type="radio" id="sex-2" value="女士" name="sex">
                        <label for="sex-2">女士</label>
                    </div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>手机：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="{{old('phone')}}" placeholder="" id="mobile" name="phone" >
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>邮箱：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="email" class="input-text" value="{{old('email')}}" placeholder="@" name="email" id="email">
                </div>
            </div>


            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;添加用户&nbsp;&nbsp;">
                </div>
            </div>
        </form>
    </article>
@endsection


@section('js')
{{--    引入样式--}}
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>


    <script type="text/javascript">
        //单选框样式
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        //前端表单验证
        $("#form-member-add").validate({
            rules:{
                truename:{
                    required:true
                },
                password:{
                    required: true
                },
                password_confirmation:{
                    equalTo:'#password'
                },
                email:{
                    email: true
                },
                phone:{
                    phone:true
                }
            },
            messages:{
                truename:{
                    required:'真实名称必须要写,不能不写',
                },
                password:{
                    required:'密码必须要写',
                }
            },
            onkeyup:false,
            success:"valid",
            //验证通过后,处理的方法
            submitHandler:function(form){
                //$(form).ajaxSubmit();
                console.log(form)
                //表单提交
                form.submit();
                // parent.layer.close(index);
            }
        });

        //自定义验证规则
        jQuery.validator.addMethod("phone",function(value,element){  //+86-13567895692
            // var reg = /(\+86-)?^1[3-9]\d{9}$/;
            var reg1 = /^\+86-1[3-9]\d{9}$/;
            var reg2 = /^1[3-9]\d{9}$/;
            var ret = reg1.test(value) || reg2.test(value);
            return this.optional(element) || ret;
        },"请输入正确的手机号");
    </script>
@endsection
